<template>
  <header :class="{searching:searching}">
    <div class="heading flex flex-align-items flex-between">
      <div class="lft flex flex-align-items">
        <a href="index.html">
          <img src="img/common/logo.png" class="logo">
        </a>
        <div class="links fullSize">
          <a href="" :class="{active:!i}" v-for="(item,i) in cates">{{item.name}}</a>
        </div>  
        <div class="links w1680">
          <template v-for="(item,i) in cates">
            <a href="" :class="{active:!i}" v-if="i < 3">{{item.name}}</a>
          </template> 
          <div class="more pop-parent">
            <p class="cursor flex flex-align-items">更多<span></span></p>
            <div class="pop hc">
              <template v-for="(item,i) in cates">
                <a href="" :class="{active:i == 3}" v-if="i >= 3">{{item.name}}</a>
              </template> 
            </div>
          </div>
        </div>
        <div class="links w1280">
          <div class="more pop-parent">
            <p class="cursor flex flex-align-items">浏览<span></span></p>
            <div class="pop hc">
              <template v-for="(item,i) in cates">
                <a href="" :class="{active:i == 3}">{{item.name}}</a>
              </template> 
            </div>
          </div>
        </div>
      </div>
      <div class="rht flex flex-align-items">
        <div class="inp-box flex flex-align-items">
          <input type="text" v-model="keyword" 
          :placeholder="hld" 
          @focus="hdlSearch(true)"
          @input="hdlInp"
          @keydown.enter="toSearch('')">
          <input type="text" class="readOnly" readonly v-model="keyword"
          :placeholder="hld"  
          @focus="hdlSearch(true)">
          <img src="img/common/clear.png" class="clear cursor" @click="clear" v-if="keyword">
          <i></i>
          <img src="img/common/search.png" class="search cursor" @click="toSearch(keyword)">
          <div class="related noScrollBar">
            <template v-if="!searchResult.length">
              <template v-if="searchHistory.length">
                <div class="ttl flex flex-align-items flex-between">
                  <p>搜索历史</p>
                  <div class="hbc clear cursor" @click="clearHis">
                    <img src="img/common/delete.png">
                    <img src="img/common/delete1.png">
                  </div>
                </div>
                <div class="item flex flex-align-items flex-between" 
                v-for="(item,i) in searchHistory"
                @click="toSearch(item.text,true)">
                  <p class="l2">{{item.text}}</p>
                  <div class="hbc clear cursor" @click="del(i)">
                    <img src="img/common/delete2.png">
                    <img src="img/common/delete3.png">
                  </div>
                </div>
              </template>
              <p class="ttl">热门搜索</p>
              <a href="info.html" target="_blank" class="item flex flex-align-items" 
                v-for="(item,i) in recomend">
                <span class="num" :class="{top3:i < 3}" v-if="!searchResult.length">{{i + 1}}</span>
                <span class="l2">{{item.name}}</span>
              </a>
            </template>
            <template v-else>
              <div class="item flex flex-align-items" 
              v-for="(item,i) in searchResult"
              @click="toSearch(item.name)">
                <span class="l2">{{item.name}}</span>
              </div>
            </template>
          </div>
        </div>
        <div class="btn cursor history flex flex-align-items flex-justify-content pop-parent">
          <div class="inn">
            <div class="icon mid">
              <div class="dc hvc">
                <img src="img/common/history.png">
                <img src="img/common/history1.png">
              </div>
            </div>
            <p>观看历史</p>
          </div>
          <div class="pop hc">
            <div class="list" v-if="history.length">
              <a href="play.html" target="_blank" class="flex item" v-for="item in history">
                <div class="cover">
                  <img :src="item.cover" class="obj-c">
                </div>
                <div class="txt flex flex-col flex-between">
                  <p class="l1">{{item.name}}</p>
                  <p class="to">观看至第1集</p>
                  <div class="progress">
                    <p class="per" :style="{width:item.percent + '%'}"></p>
                  </div>
                </div>
              </a>
            </div>
            <div class="no-history" v-else>
              <img src="img/common/history2.png">
              <p class="t">欢迎登录：多端同步观影记录，精彩剧集随时追！</p>
              <p class="button fillBf cursor iv" @click="hdlLogin">登录</p>
            </div>
            
          </div>
        </div>
        <div class="btn cursor mine flex flex-align-items flex-justify-content pop-parent">
          <div class="inn">
            <template v-if="!token">
              <div class="icon mid">
                <div class="dc hvc">
                  <img src="img/common/mine.png">
                  <img src="img/common/mine1.png">
                </div>
              </div>
              <p>我的</p>
            </template>
            <template v-else>
              <div class="avt mid r50">
                <img :src="userInfo.avatar" class="fc" v-if="userInfo.avatar">
                <img :src="userInfo.sex == 0?'img/common/girl.jpg':'img/common/boy.jpg'" class="fc" v-else>
              </div>
            </template>
          </div>
          <div class="pop hc">
            <template v-if="!token">
              <p class="t">欢迎登录，登录后精彩剧集随时追</p>
              <p class="button fillBf cursor iv" @click="hdlLogin">登录</p>
            </template>
            <template v-else>
              <div class="box">
                <div class="info flex flex-align-items">
                  <p class="avt mid r50">
                    <img :src="userInfo.avatar" class="fc" v-if="userInfo.avatar">
                    <img :src="userInfo.sex == 0?'img/common/girl.jpg':'img/common/boy.jpg'" class="fc" v-else>
                  </p>
                  <p class="name l1">{{userInfo.name}}</p>
                </div>
                <div class="menu">
                  <a href="mine.html?name=collect" target="_blank" class="hbc notransition flex flex-align-items">
                    <div class="icon">
                      <img src="img/common/collect4.png">
                      <img src="img/common/collect4-1.png">
                    </div>
                    <p class="t">我的收藏</p>
                    <div class="icon vc">
                      <img src="img/common/arw6.png">
                      <img src="img/common/arw.png">
                    </div>
                  </a>
                  <a href="mine.html?name=set" target="_blank" class="hbc notransition flex flex-align-items">
                    <div class="icon">
                      <img src="img/common/mine2.png">
                      <img src="img/common/mine1.png">
                    </div>
                    <p class="t">个人设定</p>
                    <div class="icon vc">
                      <img src="img/common/arw6.png">
                      <img src="img/common/arw.png">
                    </div>
                  </a>
                  <a href="javascript:;" target="_blank" class="hbc notransition flex flex-align-items">
                    <div class="icon">
                      <img src="img/common/logout.png">
                      <img src="img/common/logout1.png">
                    </div>
                    <p class="t">登出</p>
                    <div class="icon vc">
                      <img src="img/common/arw6.png">
                      <img src="img/common/arw.png">
                    </div>
                  </a>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="app cursor flex flex-align-items flex-justify-content">
          <img src="img/common/download1.png">APP
        </div>
      </div>
    </div>
    <div class="cate flex">
      <a href="" :class="{active:!i}" v-for="(item,i) in cates">{{item.name}}</a>
    </div>
    <div class="search-mask fill" @click="hdlSearch(false)"></div>
    <div class="search-box fill">
      <div class="tp flex flex-align-items">
        <div class="inp-box flex flex-align-items">
          <input type="text" v-model="keyword" 
          :placeholder="hld" 
          @input="hdlInp"
          @keydown.enter="toSearch">
          <img src="img/common/clear.png" class="clear cursor" @click="clear" v-if="keyword">
          <i></i>
          <img src="img/common/search.png" class="search cursor" @click="toSearch('')">
        </div>
        <p class="cancel cursor" @click="hdlSearch(false)">取消</p>
      </div>
      <div class="rslt noScrollBar">
        <template v-if="!searchResult.length">
          <div class="list" v-if="searchHistory.length">
            <div class="ttl flex flex-align-items flex-between">
              <p>搜索历史</p>
              <div class="hbc clear cursor" @click="clearHis">
                <img src="img/common/delete.png">
                <img src="img/common/delete1.png">
              </div>
            </div>
            <div class="item flex flex-align-items flex-between" 
            v-for="(item,i) in searchHistory"
            @click="toSearch(item.text,true)">
              <p class="l2">{{item.text}}</p>
              <div class="hbc clear cursor" @click.self="del(i)">
                <img src="img/common/delete2.png">
                <img src="img/common/delete3.png">
              </div>
            </div>
          </div>
          <div class="list">
            <div class="ttl flex flex-align-items flex-between">
              <p>热门搜索</p>
            </div>
            <a href="info.html" target="_blank" class="item flex flex-align-items flex-between" v-for="(item,i) in recomend">
              <span class="num" :class="{top3:i < 3}">{{i + 1}}</span>
              <p class="l2">{{item.name}}</p>
            </a>
          </div>
        </template>
        <template>
          <div class="list">
            <div class="item flex flex-align-items flex-between" v-for="(item,i) in searchResult">
              <p class="l2">{{item.name}}</p>
            </div>
          </div>
        </template>
      </div>
    </div>
  </header>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        keyword:'',
        searching:false,
        hld:'海洋之恋',
        cates: [
          { name: '推荐', },
          { name: '电视剧', },
          { name: '电影', },
          { name: '综艺', },
          { name: '动漫', },
        ],        
        ifInfo: false,
        history:[
          {name:'三更雪',cover:'img/index/c1.jpg',percent:30},
          {name:'与君长安',cover:'img/index/info.png',percent:30},
        ],
        recomend:[
          {name:'不眠日'},
          {name:'一笑随歌'},
          {name:'你的天空'},
          {name:'终极笔记'},
          {name:'穿越天际靠近你'},
          {name:'与晋长安'},
          {name:'一年一度喜剧大赛'},
          {name:'心口不一'},
          {name:'灵魂重生'},
        ],
        searchResult:[],
        searchHistory:[
          {text:'反派'},
          {text:'破产'},
          {text:'复仇'},
        ],
        hot:[
          {name:'不眠日'},
          {name:'一笑随歌'},
          {name:'你的天空'},
          {name:'终极笔记'},
          {name:'穿越天际靠近你'},
          {name:'与晋长安'},
          {name:'一年一度喜剧大赛'},
        ],
        token:localStorage.getItem('token'),
        userInfo:{
          sex:1,
          name:'zansl'
        },
      }
    },
    methods:{
      hdlSearch(val){
        this.searching = val;
      },
      clear(){
        this.keyword = '';
        this.searchResult = [];
      },
      clearHis(){
        this.searchHistory = [];
      },
      del(ind){
        this.searchHistory.splice(ind,1);
      },
      hdlInp(){
        if(this.keyword.length){
          this.searchResult = [
            {name:'我的反派男友'},
            {name:'我的宇宙'},
            {name:'我的秘密室友'},
            {name:'我的反派男友 AI英语版'},
            {name:'我的小尾巴'},
            {name:'我的阿勒泰'},
            {name:'我的少年时代'},
            {name:'我的老板为何那样'},
            {name:'我的助理不简单'},
            {name:'我的老板是小猪'},
          ];
        }else{
          this.searchResult = [];
        }
        
      },
      toSearch(val,ifHistory){
        console.log(val);
        ifHistory && (this.keyword = val);
        location.href = `search.html?query=${val || this.hld}&originInput=${this.keyword}`;
      },
      hdlLogin(){
        this.$emit('call-login');
      },
      updtToken(){
        this.token = localStorage.getItem('token');
      },
    },
    created: function () {
      if (location.href.indexOf('index.html') >= 0 || location.href.indexOf('.html') < 0) {
        this.ifHome = true;
      } else if (location.href.indexOf('info.html') >= 0) {
        this.ifInfo = true;
      }
      // console.log(currLang);
      // axios.get(dataUrl + '/novel/index/bookTypeCount').then((res) => {
      //   console.log('zz',res.data.data);
      // })

    },
    onMounted(){
    }
  }
</script>